<?php
    use User\Model\MeetingModel;
?>
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                会议详情
            </header>
            <div class="panel-body">
                <form class="form-horizontal" method="post"
                      action="<?php if($type=='add'){echo '/User/Meeting/meetingAdd';}
                      else{echo '/User/Meeting/meetingUpdate';}?>">
                    <input type="hidden" value="<?php $val = (!empty($meet)) ?
                            $meet['meet_id'] : ''; echo $val;?>" name="meetId" id="meetId">
                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label need">名称:</label>

                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="name" value="<?php $val=(!empty($meet)) ?
                            $meet['name'] : ''; echo $val;?>" id="name">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label need">会议开始时间:</label>

                        <div class="col-lg-4">
                            <input class="form-control" id="date-picker1" name="start_date" value="<?php $val=(!empty($meet) && ($meet['start_date'] != '0000-00-00 00:00:00')) ?
                            $meet['start_date'] : ''; echo $val;?>" placeholder="请输入会议开始时间">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label need">会议结束时间:</label>

                        <div class="col-lg-4">
                            <input class="form-control" id="date-picker2" name="end_date" value="<?php $val=(!empty($meet) && ($meet['end_date'] != '0000-00-00 00:00:00')) ?
                            $meet['end_date'] : ''; echo $val;?>" placeholder="请输入会议结束时间">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label need">主题颜色:</label>

                        <div class="col-lg-4">
                            <div class="col-sm-2" id="color-blue" onclick="changeColor('#008DFD')" style="width:30px;height:30px;background-color:#008DFD"></div>
                            <div class="col-sm-2" id="color-orange" onclick="changeColor('#FF824D')" style="width:30px;height:30px;background-color:#FF824D"></div>
                            <div class="col-sm-2" id="color-red" onclick="changeColor('#FF5854')" style="width:30px;height:30px;background-color:#FF5854"></div>
                            <div class="col-sm-2" id="color-green" onclick="changeColor('#2EBE9B')" style="width:30px;height:30px;background-color:#2EBE9B"></div>
                            <input class="form-control" oninput="changeColor_input(this);" name="theme_color" value="<?php $val=(!empty($meet)) ?
                            $meet['theme_color'] : '#008DFD'; echo $val;?>" id="theme_color">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label need">背景图:</label>

                        <div class="col-sm-10">
                            <img src="<?php
                            if(empty($meet)){
                                echo '/Public/projects/meeting/images/bg.jpg';
                            }else if(empty($meet['backurl'])){
                                if($meet['theme_color'] == "#FF824D"){
                                        echo "/Public/projects/meeting/images/bgorange.jpg";
                                    }else if($meet['theme_color'] == "#FF5854"){
                                        echo "/Public/projects/meeting/images/bgred.jpg";
                                    }else if($meet['theme_color'] == "#2EBE9B"){
                                        echo "/Public/projects/meeting/images/bggreen.jpg";
                                    }else{
                                        echo "/Public/projects/meeting/images/bg.jpg";
                                    }
                            }else{
                                echo $meet['backurl'];
                            }
                            ?>" alt="" id="backurl_img" style="width: 200px;height: 200px;">
                            <input name="backurl" id="backurl" type="file">
                            <?php
                            if(empty($meet) || empty($meet['backurl'])){
                                echo '<button id="clear_pic" class="btn" style="display: none">还原初始图片</button>';
                                }else{
                                    echo '<button id="clear_pic" class="btn" style="display: block;">还原初始图片</button>';
                                }
                            ?>
                            <p class="help-block">图片建议大小750*1206。</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">banner图:</label>

                        <div class="col-sm-10">
                            <img src="<?php
                            if(empty($meet) || empty($meet['bannerurl'])){
                                echo '';
                            }else{
                                echo $meet['bannerurl'];
                            }
                            ?>" alt="" id="bannerurl_img" style="width: 200px;height: 200px;">
                            <input name="bannerurl" id="bannerurl" type="file">
                            <p class="help-block">图片建议大小750*200。</p>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">公众号二维码:</label>

                        <div class="col-sm-10">
                            <img src="{$meet['wxcode']}" alt="" id="wxcode_img" style="width: 200px;height: 200px;">
                            <input name="wxcode" id="wxcode" type="file">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">禁止复制链接:</label>

                        <div class="col-sm-10">
                            <div >
                                <input type="radio" name="share_disable" value="<?php echo MeetingModel::SHARE_ABLE?>"
                                       onclick="getShareValue(this.value)" <?php if(empty($meet) || empty($meet['share_disbale'])){
                                        echo 'checked';
                                       }?>>否
                                <input type="radio" name="share_disable"
                                       value="<?php echo MeetingModel::SHARE_DISABLE?>"
                                       onclick="getShareValue(this.value)" <?php if(!empty($meet) && !empty($meet['share_able'])){
                                        echo 'checked';
                                       }?>>是
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">禁止微信授权:</label>

                        <div class="col-sm-10">
                            <div >
                                <input type="radio" name="wx_disable" value="<?php echo MeetingModel::WX_ABLE?>"
                                       onclick="getWxValue(this.value)" <?php if(empty($meet) || empty($meet['wx_disbale'])){
                                        echo 'checked';
                                       }?>>否
                                <input type="radio" name="wx_disable"
                                       value="<?php echo MeetingModel::WX_DISABLE?>"
                                       onclick="getWxValue(this.value)" <?php if(!empty($meet) && !empty($meet['wx_disable'])){
                                        echo 'checked';
                                       }?>>是
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">是否需要报名:</label>

                        <div class="col-sm-10">
                            <div >
                                <input type="radio" name="need_register" value="<?php echo MeetingModel::REGISTER_NO?>"
                                       onclick="getRegisterValue(this.value)" <?php if(empty($meet) || empty($meet['need_register'])){
                                        echo 'checked';
                                       }?>>否
                                <input type="radio" name="need_register" value="<?php echo MeetingModel::REGISTER_YES?>"
                                       onclick="getRegisterValue(this.value)" <?php if(!empty($meet) && !empty($meet['need_register'])){
                                        echo 'checked';
                                       }?>>是
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-sm-2 control-label">是否显示封面:</label>

                        <div class="col-sm-10">
                            <div >
                                <input type="radio" name="has_head" value="<?php echo MeetingModel::HEAD_NO?>" onclick="getHeadValue(this.value)" <?php if(empty($meet) || empty($meet['has_head'])){
                                        echo 'checked';
                                       }?>>否
                                <input type="radio" name="has_head" value="<?php echo MeetingModel::HEAD_YES?>" onclick="getHeadValue(this.value)" <?php if(!empty($meet) && !empty($meet['has_head'])){
                                        echo 'checked';
                                       }?>>是
                            </div>
                        </div>
                    </div>
                    <div id="head_display">
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">封面LOGO:</label>
                            <div class="col-sm-10">
                                <img src="<?php
                            if(empty($meet) || empty($meet['logourl'])){
                                echo '';
                            }else{
                                echo $meet['logourl'];
                            }
                            ?>" alt="" id="logourl_img" style="width: 200px;height: 200px;">
                                <input name="logourl" id="logourl" type="file">
                            </div>
                        </div>

                        <div class="form-group" style="display: none">
                            <div class="col-sm-2 col-sm-2 control-label">会议说明:</div>
                            <div class="col-lg-6">
                                <textarea id="editor-container" style="width:600px;height:300px;"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-10">
                            <button class="btn btn-primary" type="submit" id="submit">提交</button>
                            <button class="btn btn-default" type="button" onclick="history.back(-1);">取消</button>
                        </div>
                    </div>

                </form>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript" charset="utf-8" src="/Public/js/common/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/Public/js/common/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/Public/js/common/lang/zh-cn/zh-cn.js"></script>
<script>
    var editor = UE.getEditor('editor-container');
    var content = '<?php if(empty($meet["describe"])){echo "";}else{ echo $meet["describe"];}?>';
    editor.addListener("ready", function () {
        editor.setContent(content);
    });
</script>
<script>
    //--图片处理--
    var backurl_data = '';
    var bannerurl_data = '';
    var logourl_data = '';
    var wxcode_data = '';
    $(function () {
        var backurl = document.getElementById("backurl");
        backurl.addEventListener('change', readFile, false);

        var bannerurl = document.getElementById("bannerurl");
        bannerurl.addEventListener('change', readFile1, false);

        var logourl = document.getElementById("logourl");
        logourl.addEventListener('change', readFile2, false);

        var wxcode = document.getElementById("wxcode");
        wxcode.addEventListener('change', readFile3, false);
    });
    function readFile() {
        var file = this.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            $("#backurl_img").attr("src", this.result);
            backurl_data = this.result;
            $("#clear_pic").css("display", "block");
            clear_pic = 0;
        }
    }

    function readFile1() {
        var file = this.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            $("#bannerurl_img").attr("src", this.result);
            bannerurl_data = this.result;
        }
    }

    function readFile2() {
        var file = this.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            $("#logourl_img").attr("src", this.result);
            logourl_data = this.result;
        }
    }

    function readFile3() {
        var file = this.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            $("#wxcode_img").attr("src", this.result);
            wxcode_data = this.result;
        }
    }

    //--是否允许分享--
    var share_disable = "<?php echo !empty($meet) ? $meet['share_disable'] : MeetingModel::SHARE_ABLE?>";
    function getShareValue(val) {
        share_disable = val;
    }

    //--是否禁止微信授权--
    var wx_disable = "<?php echo !empty($meet) ? $meet['wx_disable'] : MeetingModel::WX_ABLE?>";
    function getWxValue(val) {
        wx_disable = val;
    }

    //--是否需要报名--
    var need_register = "<?php echo !empty($meet) ? $meet['need_register'] : MeetingModel::REGISTER_NO?>";
    function getRegisterValue(val) {
        need_register = val;
    }

    //--是否显示封面--
    var has_head = "<?php echo !empty($meet) ? $meet['has_head'] : MeetingModel::HEAD_NO?>";
    getHeadValue(has_head);
    function getHeadValue(val) {
        has_head = val;
        if (val == "<?php echo MeetingModel::REGISTER_YES?>") {
            $("#head_display").css('display', 'block');
        }else{
            $("#head_display").css('display', 'none');
        }
    }

    var color = $("#theme_color").val();
    color_border(color);
    function color_border(color_now){
        if(color_now == "#FF824D"){
            $("#color-orange").css("border", "2px solid black");
            $("#color-red").css("border", "none");
            $("#color-green").css("border", "none");
            $("#color-blue").css("border", "none");
        }else if(color_now == "#FF5854"){
            $("#color-orange").css("border", "none");
            $("#color-red").css("border", "2px solid black");
            $("#color-green").css("border", "none");
            $("#color-blue").css("border", "none");
        }else if(color_now == "#2EBE9B"){
            $("#color-orange").css("border", "none");
            $("#color-red").css("border", "none");
            $("#color-green").css("border", "2px solid black");
            $("#color-blue").css("border", "none");
        }else if(color_now == "#008DFD"){
            $("#color-orange").css("border", "none");
            $("#color-red").css("border", "none");
            $("#color-green").css("border", "none");
            $("#color-blue").css("border", "2px solid black");
        }else{
            $("#color-orange").css("border", "none");
            $("#color-red").css("border", "none");
            $("#color-green").css("border", "none");
            $("#color-blue").css("border", "none");
        }
    }
    //--改变颜色--
    var meet_backurl = "{$meet['backurl']}";
    console.log(meet_backurl);
    function changeColor(val){
        if((backurl_data == '') && (meet_backurl == "")){
            if(val == "#FF824D"){
                $("#backurl_img").attr("src", "/Public/projects/meeting/images/bgorange.jpg");
            }else if(val == "#FF5854"){
                $("#backurl_img").attr("src", "/Public/projects/meeting/images/bgred.jpg");
            }else if(val == "#2EBE9B"){
                $("#backurl_img").attr("src", "/Public/projects/meeting/images/bggreen.jpg");
            }else{
                $("#backurl_img").attr("src", "/Public/projects/meeting/images/bg.jpg");
            }
        }
        $("#theme_color").val(val);
        color_border(val);
    }

    function changeColor_input(obj){
        changeColor($(obj).val());
    }

    $(".need").each(function () {
        $(this).prepend("<span style='color:red'>*</span>");
    });
    var clear_pic = 0;
    $("#clear_pic").click(function(){
        var color = $("#theme_color").val();
        if(color == "#FF824D"){
            $("#backurl_img").attr("src", "/Public/projects/meeting/images/bgorange.jpg");
        }else if(color == "#FF5854"){
            $("#backurl_img").attr("src", "/Public/projects/meeting/images/bgred.jpg");
        }else if(color == "#2EBE9B"){
            $("#backurl_img").attr("src", "/Public/projects/meeting/images/bggreen.jpg");
        }else{
            $("#backurl_img").attr("src", "/Public/projects/meeting/images/bg.jpg");
        }
        $("#clear_pic").css("display", "none");
        backurl_data = '';
        meet_backurl = '';
        clear_pic = 1;
        return false;
    });
    $("#submit").click(function () {

        var data = {
            meetId: $("#meetId").val(),
            name: $("#name").val(),
            start_date: $("#date-picker1").val(),
            end_date: $("#date-picker2").val(),
            backurl: backurl_data,
            bannerurl: bannerurl_data,
            wxcode: wxcode_data,
            share_disable: share_disable,
            wx_disable: wx_disable,
            need_register: need_register,
            has_head: has_head,
            logourl: logourl_data,
            describe: editor.getContent(),
            theme_color: $("#theme_color").val(),
            clear_pic: clear_pic
        };
        var url = $("form").attr("action");
        $.ajax({
            type: 'post',
            dataType: 'json',
            data: data,
            url: url,
            success: function (res) {
                if (res.code == 1) {
                    alert("提交成功");
                    window.location = '/User/Meeting/index';
                } else {
                    alert(res.msg);
                }
            }
        });
        return false;
    });
</script>
<script type="text/javascript" src="/Public/js/laydatenew/laydate.js"></script>
<script type="text/javascript">
    laydate.render({
        elem: '#date-picker1',
        type: 'datetime'
    });
    laydate.render({
        elem: '#date-picker2',
        type: 'datetime'
    });
</script>